<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>左滑出现删除按钮</title>
    <script src="../../随便玩玩/jquery-1.8.2.min.js"></script>
    <link href="../../bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="../../bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
    <style>
        .mt15{ margin-top: 15px;}
        .lh{ line-height: 44px;}
        * { margin: 0; padding: 0; }
        .line-wrapper { width: 100%; height: 40px; overflow: hidden; font-size: 15px; border-bottom: 1px solid #aaa; }
        .line-scroll-wrapper { white-space: nowrap; height: 40px; clear: both; }
        .line-btn-delete { float: left; width: 100px; height: 40px; }
        .line-btn-delete button { width: 100%; height: 100%; background: red; border: none; font-size: 14px; font-family: 'Microsoft Yahei'; color: #fff; }
        .line-normal-wrapper { display: inline-block; line-height: 40px; float: left; }
        .line-normal-icon-wrapper { float: right; width: 120px; height: 40px; margin-right: 12px; }
        .line-normal-icon-wrapper img { width: 120px; height: 120px; }
        .line-normal-avatar-wrapper { width: 100px; height: 40px; float: left; margin-left: 12px; }
        .line-normal-left-wrapper { float: left; overflow: hidden; }
        .line-normal-info-wrapper { float: left; margin-left: 10px; }
        .line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; }
        .line-normal-msg { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; }
        .line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; }
    </style>
</head>
<body>
<div class="">
    <div class="line-wrapper">
        <div class="line-scroll-wrapper">
            <div class="line-normal-wrapper">
                <div class="line-normal-left-wrapper">
                    <div class="line-normal-info-wrapper">
                        <div class="line-normal-user-name">测试测试测试测试测试</div>
                    </div>
                </div>
                <div class="line-normal-icon-wrapper"></div>
            </div>
            <div class="line-btn-delete"><button>删除</button></div>
        </div>
    </div>

    <div class="line-wrapper">
        <div class="line-scroll-wrapper">
            <div class="line-normal-wrapper">
                <div class="line-normal-left-wrapper">
                    <div class="line-normal-info-wrapper">
                        <div class="line-normal-user-name">测试测试测试测试测试</div>
                    </div>
                </div>
                <div class="line-normal-icon-wrapper"></div>
            </div>
            <div class="line-btn-delete"><button>删除</button></div>
        </div>
    </div>

    <div class="line-wrapper">
        <div class="line-scroll-wrapper">
            <div class="line-normal-wrapper">
                <div class="line-normal-left-wrapper">
                    <div class="line-normal-info-wrapper">
                        <div class="line-normal-user-name">测试测试测试测试测试</div>
                    </div>
                </div>
                <div class="line-normal-icon-wrapper"></div>
            </div>
            <div class="line-btn-delete"><button>删除</button></div>
        </div>
    </div>

    <div class="line-wrapper">
        <div class="line-scroll-wrapper">
            <div class="line-normal-wrapper">
                <div class="line-normal-left-wrapper">
                    <div class="line-normal-info-wrapper">
                        <div class="line-normal-user-name">测试测试测试测试测试</div>
                    </div>
                </div>
                <div class="line-normal-icon-wrapper"></div>
            </div>
            <div class="line-btn-delete"><button>删除</button></div>
        </div>
    </div>

</div>
<script type="text/javascript">
    $(document).ready(function (e) {
        $(".line-scroll-wrapper").width($(".line-wrapper").width()+$(".line-btn-delete").width());
        $(".line-normal-wrapper").width($(".line-wrapper").width());
        $(".line-normal").width($(".line-normal-wrapper").width());

        //获取所有行
        var lines = $(".line-normal-wrapper");
        var len =lines.length;
        var lastX, lastXForAction;

        //记录下按下的对象
        var pressedObj;     //当前左滑对象
        var lastLeftObj;    //上一个左滑对象

        //用于记录按下的点
        var start;

        //网页在移动端运行时的监听
        for (var i=0; i<len; i++) {

            lines[i].addEventListener('touchstart', function (e) {
                lastXForAction = e.changedTouches[0].pageX;
                pressedObj = this;//记录下被按下的对象

                var touches = event.touches[0];
                console.log(touches);
                start = {
                    x: touches.pageX,
                    y: touches.pageY
                };
            });

            lines[i].addEventListener('touchmove', function (e) {
                //计算滑动过程中的X，Y变化量
                var touches = event.touches[0];
                data = {
                    x: touches.pageX - start.x,
                    y: touches.pageY - start.y
                };

                //横向位移大于纵向位移，阻止纵向滚动
                if (Math.abs(data.x) > Math.abs(data.y)) {
                    event.preventDefault();
                }
            });

            lines[i].addEventListener('touchend', function (e) {
                var diffX = e.changedTouches[0].pageX - lastXForAction;
                if (diffX < -80) {
                    $(pressedObj).animate({marginLeft:"-100px"}, 50);
                    lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({marginLeft:"0"}, 50);
                    lastLeftObj = pressedObj; // 记录上一个左滑的对象
                } else if (diffX > 80) {
                    $(pressedObj).animate({marginLeft:"0"}, 50);
                    lastLeftObj = null;
                }
            })
        }

    })
</script>
</body>
</html>